style: CSS follow ups for quicksettings

- some padding adjustments
- add proper focus style for :checked buttons
- popover radii adjustments

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2401>

diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 217aac99264c964a34c275064dd291bca1c35ee5..bdb2fb261c89cd3621bd88219da028b4b0273091 100644 (file)
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -200,7 +200,7 @@
     background-color: $selected_bg_color;
     color: $selected_fg_color;
     &:focus {
-      box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
+      box-shadow: inset 0 0 0 2px lighten($selected_bg_color, 10%);
     }
     &:hover, &:focus { 
       background-color: lighten($selected_bg_color, 5%);

diff --git a/data/theme/gnome-shell-sass/widgets/_popovers.scss b/data/theme/gnome-shell-sass/widgets/_popovers.scss
index 4a86dd3fc12f3bab819d727c2d72f570c55fe2f6..3b1d5edc0c47e41f97c1208a39b8a650bec4d894 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_popovers.scss
+++ b/data/theme/gnome-shell-sass/widgets/_popovers.scss
@@ -19,7 +19,7 @@
 // popover content
 .popup-menu-content {
   padding: $base_padding;
-  border-radius: $modal_radius - 2px;
+  border-radius: $modal_radius*1.25;
   border: 1px solid $borders_edge;
   box-shadow: 0 2px 4px 0 $shadow_color;
   background-color: $bg_color;
@@ -28,7 +28,7 @@
 // menu items
 .popup-menu-item {
   padding: $base_padding*1.5 $base_padding*2;
-  border-radius: $base_border_radius;
+  border-radius: $base_border_radius*1.5;
   spacing: $base_padding;
   transition-duration: 100ms;
   background-color: transparent;

diff --git a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
index 53325fa503cf0e0e2712b97a940b6f21298695cd..1324865904095b524f09ccf5c3fe0116a36ff30c 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
+++ b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
@@ -11,7 +11,7 @@
   border-radius: 99px;
   min-width: 11.5em;
   max-width: 11.5em;
-  min-height: 48px;
+  min-height: 44px;
 
   &:checked { @include button(default); }
 
@@ -40,7 +40,9 @@
 }
 
 .quick-slider {
-  padding: $base_padding;
+  padding: 0 $base_padding;
+
+  & > StBoxLayout { spacing: $base_padding; }
 
   .slider-bin {
     &:focus {@include button(focus);}
@@ -53,16 +55,18 @@
 }
 
 .quick-toggle-menu {
-  @include card();
-  padding: 1.5 * $base_padding;
+  background-color: $card_bg_color;
+  border-radius: $base_border_radius*2.75;
+  padding: $base_padding*2.75;
+  margin: 0 $base_padding*2.75;
 
   & .header {
     spacing-rows: 0.5 * $base_padding;
-    spacing-columns: $base_padding;
+    spacing-columns: $base_padding*2;
     padding-bottom: 2 * $base_padding;
 
     & .icon {
-      icon-size: $large_icon_size;
+      icon-size: $base_icon_size*1.5; // a non-standard symbolic size but ok
       border-radius: 999px;
       padding: 1.5 * $base_padding;
       background-color: lighten($bg_color, 10%);